<template>
	<h2>子组件-学习定义子组件的插槽</h2>
	<!-- 1.语法  <slot></slot>  预留的占位符-->
	<!-- 2.插槽的默认内容 -->
	<!-- 3.具名插槽 对slot标签添加 name属性 -->
	<slot>
		<p>slot默认内容</p>
	</slot>
	<slot name="default"></slot>
	
	<h3>文章布局</h3>
	<div class="article-container">
		<div class="header-box">
			<slot name="header" msg='子组件传递到的数据1' txt='hyz'></slot>
		</div>
		<div class="content-box">
			<slot name="content" :user='user'></slot>
		</div>
		<div class="footer-box">
			<slot name="footer"></slot>
		</div>
	</div>
	<!-- 4.作用域插槽 -->
	
</template>

<script setup>
	//定义数据
	import {reactive} from 'vue'
	const user=reactive({
		name:'小红',
		age:15
	})
</script>

<style scoped>
	.article-container>div{
		border: 1px solid hotpink;
	}
</style>